<template>
    <div class="rooms" style="margin-top: 10px;margin-left: 15px;margin-right: 15px">
      <div class="query">
        <el-form :inline="true" :model="roomsQuery" class="demo-form-inline">
          <el-form-item label="房间号">
            <el-input v-model="roomsQuery.room_num" placeholder="请输入入户人手机号"></el-input>
          </el-form-item>
          <el-form-item label="楼层">
            <el-input v-model="roomsQuery.floor" placeholder="请输入房间号"></el-input>
          </el-form-item>

          <el-form-item label="状态">
            <el-select v-model="roomsQuery.status" placeholder="请选择">
              <el-option key="0" label="打扫中" value="0"></el-option>
              <el-option key="1" label="待入住" value="1"></el-option>
              <el-option key="2" label="入住中" value="2"></el-option>
              <el-option key="3" label="维修中" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getRoomList">查询</el-button>
            <el-button type="primary" @click="roomsAddShow=true">房间新增</el-button>
          </el-form-item>

        </el-form>
      </div>
      <div class="table">
        <el-table
          border
          :data = "roomListData"
          style="width: 100%"

          fit
          highlight-current-row
          :header-cell-style="{'text-align':'center'}"
          :cell-style="{'text-align':'center'}"
          v-loading="listLoading"
        >
          <el-table-column
            prop="id"
            label="序号"
          >
          </el-table-column>
          <el-table-column
            prop="room_num"
            label="房间号"
          >
          </el-table-column>
          <el-table-column
            prop="room_name"
            label="房间名"
          >
          </el-table-column>
          <el-table-column
            prop="floor"
            label="楼层"
          >
          </el-table-column>
          <el-table-column
            prop="wifi_name"
            label="WIFI名称"
          >
          </el-table-column>
          <el-table-column
            prop="wifi_pass"
            label="WIFI密码"
          >
          </el-table-column>
          <el-table-column
            prop="status"
            label="状态"
          >
            <template v-slot="{row}">
              <el-tag v-if="row.status===0" type="info">打扫中</el-tag>
              <el-tag v-if="row.status===1" type="success">待入住</el-tag>
              <el-tag v-if="row.status===2" type="warning">入住中</el-tag>
              <el-tag v-if="row.status===3" type="danger">维修中</el-tag>
            </template>
          </el-table-column>
          <el-table-column

            label="操作"
          >
            <template slot-scope="{row,$index}">

              <el-button type="primary" size="mini" @click="handleUpdate(row)">
                编辑
              </el-button>

              <el-button size="mini" type="danger" @click="handleDelete(row,$index)">
                删除
              </el-button>
              <el-dropdown trigger="click" style="margin-left: 5px">
                <el-button size="mini" type="info" >
                  更多<i class="el-icon-caret-bottom el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item  style="margin-top: 10px">
                    <el-button type="primary" size="mini" icon="el-icon-setting" @click="handleUpdate(row)">配置</el-button>
                  </el-dropdown-item>
                  <el-dropdown-item  style="margin-top: 10px">
                    <el-button type="warning" size="mini" icon="el-icon-sell" @click="handleUpdate(row,'进货')">进货</el-button>
                  </el-dropdown-item >
                  <el-dropdown-item  style="margin-top: 10px">
                    <el-button type="success" size="mini" icon="el-icon-thumb" @click="handleUpdate(row,'领用')">领用</el-button>
                  </el-dropdown-item>
                  <el-dropdown-item  style="margin-top: 10px">
                    <el-button type="danger" size="mini" icon="el-icon-s-release" @click="handleUpdate(row,'报损')">报损</el-button>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
        <Pagination v-show="roomsQuery.total>0" :total="roomsQuery.total" :page.sync="roomsQuery.page_num"
                    :limit.sync="roomsQuery.page_size" @pagination="getRoomList"/>
      </div>

      <div class="dialog">
        <el-dialog title="房间新增" :visible.sync="roomsAddShow" width="20%">
          <el-form :model="roomInfo" label-width="100px">
            <el-form-item label="房间号">
              <el-input style="width: 80%" v-model="roomInfo.room_num" autocomplete="off"
                        placeholder="请输入房间号"></el-input>
            </el-form-item>

            <el-form-item label="房间名称">
              <el-input  style="width: 80%" v-model.trim="roomInfo.room_name" autocomplete="off"
                         placeholder="请输入房间号"></el-input>
            </el-form-item>
            <el-form-item label="楼层号">
              <el-input  type="number" style="width: 80%" v-model.number="roomInfo.floor" autocomplete="off"
                        placeholder="请输入房间号"></el-input>
            </el-form-item>

            <el-form-item label="WIFI名称">
              <el-input style="width: 80%" v-model="roomInfo.wifi_name" autocomplete="off"
                        placeholder="请输入WIFI名称"></el-input>
            </el-form-item>
            <el-form-item label="WIFI密码">
              <el-input style="width: 80%" v-model="roomInfo.wifi_pass" autocomplete="off"
                        placeholder="请输入WIFI密码"></el-input>
            </el-form-item>

            <el-form-item label="描述">
              <el-input   style="width: 80%" v-model="roomInfo.desc" autocomplete="off"
                         placeholder="请输入房间号"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="roomsAddShow = false">取 消</el-button>
            <el-button type="primary" @click="roomAdd()">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
</template>

<script src="./_rooms.js" lang="js"></script>
<style src="./_rooms.scss" lang="scss" scoped></style>
